body {
  margin: 0;
  padding-top: env(safe-area-inset-top);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

.ios-app-nav {
  padding-top: 10px !important;
  /* Status bar height on iOS 11.0 */
  padding-top: calc(constant(safe-area-inset-top)) !important;
  /* Status bar height on iOS 11+ */
  padding-top: calc(env(safe-area-inset-top)) !important;
}

.pet-avatar-text {
  margin-bottom: 0.25rem !important;
  margin-top: 0.25rem !important;
}

.pet-avatar-text-selected {
  margin-bottom: 0.25rem !important;
  margin-top: 0.25rem !important;
  font-weight: 700 !important;
}

.pet-avatar-text:hover {
  font-weight: 700 !important;
}

.pet-avatar-container:hover {
  box-shadow: 0 0 0 4px #28afb0 !important;
}

@media (min-width: 767px) {
  .schedule-modal .modal-dialog {
    max-width: 700px !important;
  }
}

//react-timekeeper overrides
:root {
  --dropdown-shadow: none;
  --main-box-shadow: none;
  --clock-wrapper-bg: #fff;
  --clock-bg: #f4f4f4;
  --top-text-color: #000;
  --top-colon-color: #000;
  --meridiem-selected-bg-color: rgb(150, 219, 250);
  --meridiem-selected-text-color: #fff;
  --top-selected-color: rgb(150, 219, 250);
}
